<template>
  <div class="con">
    <div>
      <img :src="content.picUrl + '?param=100y100'" alt="" />
    </div>

    <div>
      <p>{{ content.name }}</p>
      <p>{{ content.song.artists[0].name }}</p>
    </div>

    <div>
      <!-- <img src="/public/images/youtube.png" alt="" /> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: Object,
  },
}
</script>

<style lang="less" scoped>
.con {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 3px 0;

  & > div:first-child {
    width: 17vw;

    img {
      width: 100%;
      border-radius: 10px;
    }
  }

  & > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 68vw;
    p {
      width: 60vw;
      text-indent: 1.5em;
      margin: 0;
      line-height: 1.5;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  & > div:nth-child(3) {
    width: 15vw;
    line-height: 17vw;

    img {
      width: 50%;
      vertical-align: middle;
    }
  }
}
</style>
